<template>
  <div class="sign_box" ref="boxRef" :style="{ height: boxHeight }">
    <div class="sign_btns">
      <div class="btns">
        <!-- <van-button type="primary" @click="handleReset">重置</van-button>
        <van-button type="info" @click="handleGenerate">确定</van-button> -->
        <div class="btn_base btn_base_reset" @click="back">
          <span>取消</span>
        </div>
        <div class="btn_base btn_base_reset" @click="handleReset">
          <span>重置</span>
        </div>
        <div class="btn_base btn_base_reset" @click="handleGenerate">
          <span>完成</span>
        </div>
      </div>
    </div>
    <div class="sign_content">
      <!-- :style="{ height: signBox.signHeight + 'px', width: signBox.signWidth + 'px' }" -->
      <canvas id="canvas" :width="signBox.signWidth" :height="signBox.signHeight" v-if="signBox.signHeight > 0"></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import SignaturePad from "signature_pad";
import { base64ToRoate } from "@/utils/base64ToRoate";
import { log } from "console";
import { useRouter } from "vue-router";
let signaturePad = null;
const router = useRouter();

const boxRef = ref();
const boxHeight = ref();

const isDraw = ref(false);

const signBox = reactive({
  signWidth: 0,
  signHeight: 0,
  bgColor: "rgba(0,0,0,0)"
});

const handleReset = () => {
  signaturePad && signaturePad.clear();
};

const handleGenerate = () => {
  const data = signaturePad.toDataURL();
  data &&
    base64ToRoate(data).then(res => {
      console.log(res);
    });
};

const back = () => {
  router.go(-1);
};

onMounted(() => {
  boxHeight.value = document.documentElement.clientHeight + "px";
  const scHeight = document.documentElement.clientHeight;
  const scWidth = document.documentElement.clientWidth;
  signBox.signWidth = scWidth - 55;
  signBox.signHeight = scHeight - 5;
  isDraw.value = true;
  //   window.addEventListener("orientationchange", function (event) {
  //     console.log(window.orientation);
  //     if (window.orientation === 90 || window.orientation === -90) {
  //       event.preventDefault();
  //     }
  //   });
  setTimeout(() => {
    const canvas = document.querySelector("canvas");
    signaturePad = new SignaturePad(canvas, {
      penColor: "rgb(0,0,0)"
    });
  }, 200);
});
</script>

<style lang="scss" scoped>
.sign_box {
  display: flex;
  height: 100%;

  .sign_content {
    flex: 1;
    height: var(--vhHeight);
    height: 100%;
  }
  .sign_btns {
    // height: 100vh;
    height: 100%;
    display: flex;
    width: 50px;
    flex-direction: column;
    justify-content: flex-end;
    background-color: #eee;

    .btns {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .btn_base {
        background: #1989fa;
        width: 40px;
        height: 60px;
        position: relative;
        border-radius: 5px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        span {
          transform: rotate(90deg);
          display: inline-block;
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>
